<!-- 检票员端 登录页 -->
<template>
  <div class="container">
    <div class="head">
      <img src="@/assets/images/inspector/bg.png" alt="" class="bg">
      <div class="tab-wrap">
        <div class="title-wrap">
          <img src="@/assets/images/zelogo.png" alt="" class="logo">
          <div class="title">
            <div class="title-main">共享校车检票员登录</div>
            <!-- <div class="title-sub">登录端</div> -->
          </div>
        </div>
        <div :class="['tab-btn-wrap', `active${tabActive}`]">
          <div class="u-btn tab-btn" v-for="(item, i) in tabList" :key="i" @click="tabActive = i">{{ item }}</div>
        </div>
      </div>
      
    </div>
    <div class="main">
      <div class="login-wrap">
        <!-- 密码登录 -->
        <!-- <div :class="['form-wrap', { height0: tabActive, }]"> -->
        <div class="form-wrap" v-show="!tabActive">
          <div class="ipt-wrap">
            <input type="text" class="ipt" placeholder="请输入账户" v-model.trim="form.account">
          </div>
          <div class="ipt-wrap">
            <input type="password" class="ipt" placeholder="请输入登录密码" v-model.trim="form.password">
          </div>
          <div class="check-wrap">
            <van-checkbox v-model="remember" shape="square" icon-size="18px">记住密码</van-checkbox>
          </div>

          <van-button class="btn" color="#2882FE" @click="onLogin">登录</van-button>
          <div class="btn-forget" v-show="!tabActive" @click="onFindPassword">找回密码？</div>
        </div>

        <!-- 微信登录 -->
        <div class="form-wrap" v-show="tabActive">
          <van-button class="btn btn-bind" color="#2882FE" @click="onWechatLogin">微信用户一键登录</van-button>
        </div>
        
      </div>
    </div>
  </div>
</template>

<script>
import { Checkbox, Toast, } from 'vant'

export default {
  name: '',
  components: {
    [Checkbox.name]: Checkbox
  },
  computed: {
    
  },
  data() {
    return {
      tabList: ['密码登录', '微信登录', ],
      tabActive: 0,
      remember: false,
      form: {
        account: '',
        password: '',
      }
    }
  },
  methods: {
    // 登录
    onLogin() {
      // 账号、密码验证
      let { account, password, } = this.form
      if(!account || !password) {
        Toast('请输入账号和密码！')
        return
      }
      this.$router.push({ name: 'tcheck' })
    },
    // 找回密码
    onFindPassword() {

    },
    // 微信用户一键登录
    onWechatLogin() {
      this.$router.push({ name: 'tcheck' })
    },
  },
}
</script>

<style scoped lang="less">
.container {
  font-size: 14px;

  >.head {
    position: relative;

    >.bg {
      display: block;
      width: 100%;
    }

    >.tab-wrap {
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;

      >.title-wrap {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 16px;
        color: #fff;

        >.logo {
          height: 40px;
        }

        >.title {
          margin-left: 0.25rem;
          font-size: 20px;
        }
      }

      >.tab-btn-wrap {
        position: relative;
        display: flex;
        margin: 0 24px;

        &::after {
          content: '';
          position: absolute;
          // left: 25%;
          bottom: -1px;
          transform: translateX(-50%);
          transition: all 0.2s;
          width: 0;
          height: 0;
          border-bottom: 9px solid #f2f3f5;
          border-left: 10px solid transparent;
          border-right: 10px solid transparent;
        }

        &.active0::after {
          left: 25%;
        }
        &.active1::after {
          left: 75%;
        }

        >.tab-btn {
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
          height: 43px;
          font-size: 16px;
          color: #fff;
        }
      }
    }
  }

  >.main {
    padding: 28px 30px 0;
    color: #888;

    >.login-wrap {

      >.form-wrap {
        >.ipt-wrap {
          display: flex;
          align-items: center;
          height: 36px;
          padding: 0 8px;
          border: 1px solid #bbb;
          border-radius: 6px;
          overflow: hidden;
          background: #fff;

          >.ipt {
            flex: 1;
            height: 100%;
            font-size: 14px;
          }

          &:first-child {
            margin-bottom: 18px;
          }
        }

        >.check-wrap {
          display: flex;
          align-items: center;
          margin-top: 10px;
          margin-bottom: 60px;

          ::v-deep {
            .van-checkbox__label {
              margin-left: 4px;
              color: #888 !important;
            }
          }
        }

        >.btn {
          width: 100%;
          height: 37px;
          border-radius: 4px;

          &.btn-bind {
            margin-top: 60px;
          }
        }

        >.btn-forget {
          margin-top: 12px;
          font-size: 13px;
          color: #808080;
        }
      }
    }
  }
}
</style>
